<template>
  <div id="app">
    <div>
      <div style="padding: 15px 10px;box-shadow: 0 0 0 #999;">
        <span style="float: right;font-size: 16px;line-height: 36px;"><Icon type="ios-time" style="margin-right: 15px;"></Icon>{{nowDate}}</span>
        <h1 style="overflow: hidden;">光语物联  智能路灯监控平台</h1>
      </div>
    </div>
    <div style="flex: 1;">
      <div style="width:220px;float: left;height: 100%;background-color: #495060;">
        <Menu ref="appMenu" width="auto" accordion @on-select="routeChange" theme="dark">
          <Menu-item class="son" name="Index" id="son601"><Icon type="ios-home"></Icon>首页</Menu-item>
          <Submenu name="ToolManagement" id="lnav_big_1">
            <template slot="title">
              <Icon type="ios-gear"></Icon>档案管理
              
            </template>
            <Menu-item class="son" name="AccountManagement">台账管理</Menu-item>
            <Menu-item class="son" name="NewToolInStock">新工具入库</Menu-item>
            <!--<Menu-item class="son" name="/physical">退货管理</Menu-item>-->
            <Menu-item class="son" name="ToolCollecting">工具领用</Menu-item>
            <Menu-item class="son" name="RecyclingRegistration">回收登记</Menu-item>
            <Menu-item class="son" name="ToolFlawDetection">工具探伤</Menu-item>
            <Menu-item class="son" name="ToolRepair">工具检修</Menu-item>
            <Menu-item class="son" name="ScrapAndApproval">报废审批</Menu-item>
          </Submenu>
          <Submenu name="StatisticalAnalysis">
            <template slot="title">
              <Icon type="flag"></Icon> 采集管理
            </template>
            <Menu-item class="son" name="WorkReport" id="son6">工作量报告</Menu-item>
            <Menu-item class="son" name="InventoryReport" id="son7">库存报告</Menu-item>
            <Menu-item class="son" name="NewOldReport" id="son9">新旧率统计</Menu-item>
            <Menu-item class="son" name="UseReport" id="son9">使用率统计</Menu-item>
          </Submenu>
          <Submenu name="StatisticalAnalysis">
            <template slot="title">
              <Icon type="flag"></Icon> 综合查询
            </template>
            <Menu-item class="son" name="WorkReport" id="son6">工作量报告</Menu-item>
            <Menu-item class="son" name="InventoryReport" id="son7">库存报告</Menu-item>
            <Menu-item class="son" name="NewOldReport" id="son9">新旧率统计</Menu-item>
            <Menu-item class="son" name="UseReport" id="son9">使用率统计</Menu-item>
          </Submenu>
          <Submenu name="StatisticalAnalysis">
            <template slot="title">
              <Icon type="flag"></Icon> 缴费充值
            </template>
            <Menu-item class="son" name="WorkReport" id="son6">工作量报告</Menu-item>
            <Menu-item class="son" name="InventoryReport" id="son7">库存报告</Menu-item>
            <Menu-item class="son" name="NewOldReport" id="son9">新旧率统计</Menu-item>
            <Menu-item class="son" name="UseReport" id="son9">使用率统计</Menu-item>
          </Submenu>
          <Submenu name="StatisticalAnalysis">
            <template slot="title">
              <Icon type="flag"></Icon> 系统管理
            </template>
            <Menu-item class="son" name="WorkReport" id="son6">工作量报告</Menu-item>
            <Menu-item class="son" name="InventoryReport" id="son7">库存报告</Menu-item>
            <Menu-item class="son" name="NewOldReport" id="son9">新旧率统计</Menu-item>
            <Menu-item class="son" name="UseReport" id="son9">使用率统计</Menu-item>
          </Submenu>
          <Submenu name="StatisticalAnalysis">
            <template slot="title">
              <Icon type="flag"></Icon> 统计分析
            </template>
            <Menu-item class="son" name="WorkReport" id="son6">工作量报告</Menu-item>
            <Menu-item class="son" name="InventoryReport" id="son7">库存报告</Menu-item>
            <Menu-item class="son" name="NewOldReport" id="son9">新旧率统计</Menu-item>
            <Menu-item class="son" name="UseReport" id="son9">使用率统计</Menu-item>
          </Submenu>
        </Menu>
      </div>
      <div style="height: 100%;">
        <router-view/>
      </div>
    </div>
    <div style="height: 50px;text-align: center;line-height: 50px;">页尾</div>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      nowDate: new Date().Format('yyyy-MM-dd hh:mm:ss')
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: function(){
      setInterval(() => {
        this.nowDate = new Date().Format('yyyy-MM-dd hh:mm:ss')
      }, 1000)
    },
    routeChange: function(name){ 
      this.$router.push({name: name});
    },
  }
}
</script>

<style>
  html, body{
    min-width: 900px;
    height: 100%;
  }
  .ivu-menu-horizontal {
    height: 40px;
    line-height: 40px;
  }
  .clearfix{
    clear: both;
    zoom: 1;
  }
  #app{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
</style>
